var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        query: '',
        relation_list: [],
        relation_list_len : 4,
        has_relation: false,
        search_mode: false,

        has_changes_res: false,
        no_need_change: 0,
        change_no_res: false,

        queryItem: "---",
        resNum: "--",
        wastedTime: "--",
        searchToken: "",
        lastIndex: 0,
        posNum: 1,
        negNum: 1,
        mblogs: [],
        stimes: [
        ],
        showRight: false,
        showRelatedSearch: false,
        totalPage: 40,
        relatedItem: [],
        currentPage: 1,
        search_tag: "",
        hotSearch: [
            {"rank":1, "hot_text": "iPhone 13发布会", "hot_num":"21万"},
            {"rank":2, "hot_text": "iPhone 13发布会", "hot_num":"21万"},
            {"rank":3, "hot_text": "iPhone 13发布会", "hot_num":"21万"},
            {"rank":4, "hot_text": "iPhone 13发布会", "hot_num":"21万"},
        ],
    },
    created(){

    },
    watch:{
        'query'(newName,oldName){
            var that = this
            this.relation_list = []
            this.has_relation = false
            this.relation_list_len = 0
            if(newName.length != 0) {

                axios({
                    method:'get',
                    url: 'http://82.157.127.245:5000/suggestion',
                    params:{
                        query: newName,
                    },
                }).then(function(response) {
                    let result = response.data
                    console.log(result)
                    if (that.query.length != 0 && result.suggestion.length != 0) {
                        that.relation_list = result.suggestion
                        that.has_relation = true
                        that.relation_list_len = that.relation_list.length
                    }
                    
                })
                console.log(newName)
            }
            if (this.query.length == 0) {
                this.relation_list = []
                this.has_relation = false
                this.relation_list_len = 0
            }
        }
    },
    methods:{
        quitSearchMode: function () {
            this.search_mode = false
        },
        getQueryResult: function () {
            
            if (this.query != "") {
                var that = this
                return new Promise(function(resolve, reject){
                    axios({
                        method:'get',
                        url: 'http://82.157.127.245:5000/search_all',
                        params:{
                            tag: that.search_tag,
                        },
                    }).then(function(response) {
                        let result = response.data
                        console.log(result)
                        if (result.has_more_mblog == 1){
                            that.posNum = result.pos_num
                            that.negNum = result.neg_num
                        }
                        that.searchToken = result.search_token                        
                        resolve("你好");
                    })
                   
                });
            }

            
        },
        search: function () {
            var that = this
            this.queryItem = this.query
            this.search_mode = true
            this.mblogs = []
            this.showRelatedSearch = false

            this.has_changes_res = false
            this.relatedItem = []
            var search_tag = this.genRandomNumber()
            this.search_tag = search_tag

            if (this.query != "") {
                const loading = that.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    customClass : 'loading',
                    background: 'rgba(232, 240, 254, 0.7)'
                });
                
                axios({
                    method:'get',
                    url: 'http://82.157.127.245:5000/search',
                    params:{
                        query: that.query,
                        tag: that.search_tag,
                    },
                }).then(function(response) {
                    let result = response.data
                    that.mblogs = result.mblogs
                    that.resNum = result.res_num
                    that.wastedTime = result.total_time
                    if (result.res_num <= 10) {
                        that.posNum = result.pos_num
                        that.negNum = result.neg_num
                    }
                    that.totalPage = result.res_num
                    loading.close();
                })
            }
            

            this.getQueryResult().then(data=>{

                var myChart = echarts.init(document.getElementById('container'));
                var myChart2 = echarts.init(document.getElementById('container2'));
                // 指定图表的配置项和数据
                var option = {
                    series: [
                        {
                            type: 'pie',
                            color:['#00ae5c', 'rgba(234,67,53,1)'],
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{b}:{d}%'
                                }
                            },
                            data: [
                                {
                                    value: that.posNum,
                                    name: '正面'
                                },
                                {
                                    value: that.negNum,
                                    name: '负面'
                                }
                            ],
                            radius: '50%'
                        }
                    ]
                };
                option2 = {
                    xAxis: {
                    },
                    yAxis: {data: ['正面', '负面' ]},
                    series: [
                        {
                            type: 'bar',
                            label: {
                                show: false,
                                position: 'right',
                                verticalAlign: 'middle',
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var colorList = ['#00ae5c', 'rgba(234,67,53,1)'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data: [that.posNum, that.negNum]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart2.setOption(option2);
            });
            axios({
                method:'get',
                url: 'http://82.157.127.245:5000/relate',
                params:{
                    query: that.query,
                },
            }).then(function(response) {
                let result = response.data
                console.log(result)
                if (result.relate.length != 0){
                    that.showRelatedSearch = true
                    that.relatedItem = result.relate
                }
            })
            axios({
                method:'get',
                url: 'http://82.157.127.245:5000/senti_changes',
                params:{
                    tag: search_tag,
                },
            }).then(function(response) {
                let result = response.data
                console.log(result)
                that.no_need_change = result.no_need_senti_change
                if (result.no_need_senti_change != 1){
                    that.stimes = result.times
                    that.has_changes_res = true
                    if (result.times.length == 0) {
                        that.change_no_res = true
                    } else {
                        that.change_no_res = false
                    }
                }
            })
        },
        showPicture: function(index) {
            this.mblogs[index].show_pic = ! this.mblogs[index].show_pic
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage
            console.log(currentPage)
            var that = this
            //每页20条，第k页的起始id为 k * 20
            const loading = that.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                customClass : 'loading',
                background: 'rgba(232, 240, 254, 0.7)'
            });
            axios({
                method:'get',
                url: 'http://82.157.127.245:5000/next',
                params:{
                    search_token: that.searchToken,
                    start_index: (currentPage-1) * 10,
                },
            }).then(function(response) {
                let result = response.data
                console.log(result)
                that.mblogs = result.mblogs
                
                
                loading.close();

                
            })
        },
        relatedSearch: function(index) {
            this.queryItem = this.relatedItem[index].item_title
            this.query = this.queryItem
            this.search()
        },
        suggest: function(index) {
            this.queryItem = this.relation_list[index]
            this.query = this.queryItem
            this.search()
        },
        genRandomNumber: function() {
            var time = new Date()
            var y = time.getFullYear()
            var m = time.getMonth()
            var d = time.getDate()
            var h = time.getHours()
            var mm = time.getMinutes()
            var s = time.getSeconds()
            return y + "" + m + "" + d + "" + h + "" + mm + "" + s 
        },
    }
})